    <style include="shared-style cr-shared-style">
      :host {
        display: block;
        overflow: auto;
      }

      #illustration {
        background: url(images/sign_in_promo.svg) no-repeat center center;
        background-size: contain;
        height: 222px;
        margin-top: 100px;
        width: 594.5px;
      }

      @media (prefers-color-scheme: dark) {
        #illustration {
          background-image: url(images/sign_in_promo_dark.svg);
        }
      }

      #no-synced-tabs {
        height: 100%;
      }

      #sign-in-guide {
        align-items: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        overflow-x: hidden;
        text-align: center;
      }

      #sign-in-promo {
        font-size: 215%;
        margin-top: 40px;
      }

      #sign-in-promo-desc {
        color: var(--cr-secondary-text-color);
        font-size: 123%;
        margin-top: 10px;
      }

      #sign-in-button {
        margin: 24px 0;
      }

      #synced-device-list {
        padding-top: var(--first-card-padding-top);
      }

      history-synced-device-card {
        margin-block-end: var(--card-padding-between);
      }
    </style>
    <div id="synced-device-list" class="history-cards"
        hidden="[[!syncedDevices_.length]]">
      <template is="dom-repeat" items="[[syncedDevices_]]" as="syncedDevice">
        <history-synced-device-card
            device="[[syncedDevice.device]]"
            last-update-time="[[syncedDevice.lastUpdateTime]]"
            tabs="[[syncedDevice.tabs]]"
            separator-indexes="[[syncedDevice.separatorIndexes]]"
            search-term="[[searchTerm]]"
            session-tag="[[syncedDevice.tag]]"
            opened="{{syncedDevice.opened}}">
        </history-synced-device-card>
      </template>
    </div>
    <div id="no-synced-tabs" class="centered-message"
        hidden="[[!showNoSyncedMessage(signInState, syncedDevices_.length,
                                       guestSession_)]]">
      [[noSyncedTabsMessage(fetchingSyncedTabs_, searchTerm)]]
    </div>
    <div id="sign-in-guide"
        hidden="[[!showSignInGuide(signInState, guestSession_,
                                   signInAllowed_)]]">
      <div id="illustration"></div>
      <div id="sign-in-promo">$i18n{signInPromo}</div>
      <div id="sign-in-promo-desc">$i18n{signInPromoDesc}</div>
      <cr-button id="sign-in-button" class="action-button"
          on-click="onSignInTap_">
        $i18n{signInButton}
      </cr-button>
    </div>

    <cr-lazy-render id="menu">
      <template>
        <cr-action-menu role-description="$i18n{menu}">
          <button id="menuOpenButton" class="dropdown-item"
              on-click="onOpenAllTap_">
            $i18n{openAll}
          </button>
          <button id="menuDeleteButton" class="dropdown-item"
              on-click="onDeleteSessionTap_">
            $i18n{deleteSession}
          </button>
        </cr-action-menu>
      </template>
    </cr-lazy-render>
